<!-- DOCTYPE html 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- html 根元素，lang="" 设置页面主语言，有助于搜索引擎优化和辅助技术（如屏幕阅读器） -->
<html lang="">
    <head>
        <!-- meta charset="utf-8" 指定文档的字符编码为 UTF-8，这是最广泛使用的字符编码 -->
        <meta charset="utf-8" />
        <!-- meta http-equiv="X-UA-Compatible" content="IE=edge" 告诉 IE 浏览器使用其最新的渲染引擎 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- meta name="viewport" ... 用于控制移动设备上的页面布局和缩放 -->
        <!-- width=device-width 设置视口宽度等于设备宽度 -->
        <!-- initial-scale=1.0 设置初始缩放比例为 1.0，即不缩放 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <!-- link rel="icon" 指定网站的收藏夹图标（favicon） -->
        <!-- href="<%= BASE_URL %>favicon.ico" 是一个模板语法 -->
        <!-- <%= BASE_URL %> 是一个由 Vue CLI 注入的变量，它代表你的应用的公共路径（public path）。
         在开发环境下默认是 "/"，在生产环境下可能根据 vue.config.js 中的 publicPath 配置而不同。 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <!-- title 标签定义了浏览器标签页上显示的标题 -->
        <!-- <%= htmlWebpackPlugin.options.title %> 是一个由 html-webpack-plugin 注入的变量。
         它的值通常来自 package.json 的 name 字段或在 vue.config.js 中配置。 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <!-- noscript 标签里的内容只会在浏览器禁用 JavaScript 时显示 -->
        <noscript>
            <strong
                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
                enabled. Please enable it to continue.</strong
            >
        </noscript>
        <!-- 这是整个 Vue 应用的挂载点。 -->
        <!-- src/main.js 中创建的 Vue 根实例最终会渲染并替换掉这个 div 的内容。 -->
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <!-- 这是一个注释，提示开发者：Webpack 在构建过程中会自动将打包生成的 JS 和 CSS 文件（<script> 和 <link> 标签）注入到这里。
         所以你不需要手动添加任何对打包后文件的引用。 -->
    </body>
</html>
